<template>
   <div class="page-container">
      <div class="page-header">
         <div class="page-title">
            <span class="title-text">计量单位</span>
         </div>
         <div class="page-actions">
            <el-button @click="dialogRef?.openLoading()" color="#6860FF" type="primary">
               新增单位
            </el-button>
            <el-button @click="deleteSelected" color="#6860FF" type="primary" :disabled="selectedIds.length === 0">
               删除所选数据 ({{ selectedIds.length }})
            </el-button>
         </div>

      </div>
      <div class="page-content">
         <div class="search-section">
            <el-input
               placeholder="名称/编号"
               v-model="pageData.keywords"
               suffix-icon="Search"
               clearable
               style="width: 300px;" />
         </div>

         <div class="table-section">
            <el-table :data="tabeData" style="width: 100%" v-loading="loading" border @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="55" align="center" />
               <el-table-column align="center" prop="name" label="名称" min-width="120" />
               <el-table-column align="center" prop="no" label="编号" min-width="120" />
               <el-table-column align="center" prop="note" label="备注" min-width="150" />
               <el-table-column align="center" prop="creator_name" label="创建人" min-width="100" />
               <el-table-column align="center" prop="created_at" label="创建时间" min-width="180" />
               <el-table-column align="center" label="操作" min-width="160" fixed="right">
                  <template #default="scope">
                     <div class="action-buttons">
                        <el-button size="small" @click="editUnitMeasure(scope.row)" type="primary">编辑</el-button>
                        <el-button size="small" type="danger" @click="deleteSingle(scope.row)">删除</el-button>
                     </div>
                  </template>
               </el-table-column>
            </el-table>
         </div>

         <!-- 分页 -->
         <div class="pagination-wrapper">
            <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
               :page-size="pageData.page_size" :total="total" />
         </div>
      </div>
   </div>

   <UnitMeasurement ref="dialogRef" @getUnitMeasureList="getUnitMeasureList" />
</template>

<script setup lang="ts">
import api from "@/api";
import { ref, onMounted, watch } from "vue";
import UnitMeasurement from "./components/UnitMeasurement.vue";
import { ElMessage, ElMessageBox } from "element-plus";

const dialogRef = ref<any>(null);
const selectedIds = ref<number[]>([]);

// ts类型
interface pageData {
   page_size: number;
   page: number;
   keywords: string;
}
const pageData = ref<pageData>({
   page_size: 10,
   page: 1,
   keywords: "",
});
const total = ref(0);
const tabeData = ref([]);

// 获取计量单位列表
const getUnitMeasureList = async () => {
   const res = await api.unitMeasure.getUnitMeasureList(pageData.value);
   if (res.code === 200) {
      tabeData.value = res.data.data;
      total.value = res.data.pager.total_records;
   }
};

// 处理选择变化
const handleSelectionChange = (selection: any[]) => {
   selectedIds.value = selection.map(item => item.id);
};

// 侦听动态分页
watch(
   () => {
      return pageData.value;
   },
   () => {
      getUnitMeasureList();
   },
   { deep: true }
);

const pageSize = (e: number) => {
   pageData.value.page_size = e;
};

const getPage = (e: number) => {
   pageData.value.page = e;
};

// 编辑计量单位
const editUnitMeasure = (row: any) => {
   dialogRef.value.openLoading(row);
};

// 删除单个计量单位
const deleteSingle = async (row: any) => {
   ElMessageBox.confirm("确定删除该计量单位吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
   }).then(async () => {
      const res = await api.unitMeasure.deleteUnitMeasure([row.id]);
      if (res.code === 200) {
         ElMessage.success("删除成功");
         getUnitMeasureList();
      }
   });
};

// 删除所选数据
const deleteSelected = async () => {
   if (selectedIds.value.length === 0) {
      ElMessage.warning("请选择要删除的数据");
      return;
   }
   
   ElMessageBox.confirm(`确定删除选中的 ${selectedIds.value.length} 条数据吗？`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
   }).then(async () => {
      const res = await api.unitMeasure.deleteUnitMeasure(selectedIds.value);
      if (res.code === 200) {
         ElMessage.success(`成功删除 ${selectedIds.value.length} 条数据`);
         selectedIds.value = [];
         getUnitMeasureList();
      }
   });
};

const loading = ref(false);

// 初始化
onMounted(() => {
   getUnitMeasureList();
});
</script>

<style lang="scss" scoped>
// 页面容器 - 采用弹性布局
.page-container {
   height: 100vh;
   display: flex;
   flex-direction: column;
   background-color: #f5f7fa;
   overflow: hidden;
}

// 页面头部
.page-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px;
   background-color: #fff;
   border-bottom: 1px solid #e5e7eb;
   flex-shrink: 0; // 防止头部被压缩

   .page-title {
      .title-text {
         font-size: 20px;
         font-weight: 600;
         color: #333;
      }
   }

   .page-actions {
      display: flex;
      gap: 12px;

      .el-button {
         min-width: 120px;
      }
   }
}

// 页面内容区域
.page-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   padding: 20px;
   overflow: hidden;
}

// 搜索区域
.search-section {
   margin-bottom: 20px;

   .search-input {
      max-width: 400px;
   }
}

// 表格区域
.table-section {
   flex: 1;
   background-color: #fff;
   border-radius: 8px;
   padding: 20px;
   overflow: hidden;
   display: flex;
   flex-direction: column;

   .el-table {
      flex: 1;
   }
}

// 操作按钮
.action-buttons {
   display: flex;
   gap: 8px;
   justify-content: center;
}

// 分页器
.pagination-wrapper {
   margin-top: 20px;
   display: flex;
   justify-content: center;

   .pagination {
      background-color: #fff;
      padding: 15px 20px;
      border-radius: 8px;
   }
}

// Element Plus 样式覆盖
:deep(.el-table) {
   --el-table-header-bg-color: rgba(235, 236, 240, 1);

   thead {
      color: #444;
   }
}

:deep(.el-input__wrapper) {
   background-color: rgba(250, 252, 251, 1);

   &:hover {
      box-shadow: inset 0 0 0 1px #6860ff;
   }
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
   background-color: #000 !important;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
   background-color: #6860ff;
   border-color: #6860ff;
}

:deep(.el-checkbox__inner:hover) {
   border-color: #626aef !important;
}

:deep(.el-button:hover) {
   background-color: #e2e4fd;
   color: #6860ff;
}

:deep(.el-button:hover) {
   background-color: #e2e4fd;
   color: #6860ff;
}

:deep(.el-input__wrapper:hover) {
   box-shadow: inset 0 0 0 1px #6860ff;
}

:deep(.el-button:hover) {
   background-color: #e2e4fd;
   color: #6860ff;
}

.deepPurple {
   color: #7a60fe;
   margin-left: 10px;
}

.amount-statistics {
   display: flex;
   justify-content: start;
   align-items: center;
   padding: 10px 20px;
   background-color: #f2f2f2;
   margin-top: 20px;
   border-radius: 5px;

   .amount-statistics-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: auto;
   }
}
</style>
